<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>防抖</title>
</head>
<body>
<button id="debounce">点我防抖！</button>

<script>
	window.onload = function() {
		// 1、获取这个按钮，并绑定事件
		var myDebounce = document.getElementById("debounce");
		myDebounce.addEventListener("click", debounce(sayDebounce));
	}

	// 2、防抖功能函数，接受传参
	function debounce(fn) {
		// 4、创建一个标记用来存放定时器的返回值
		let timeout = null;
		return function() {
			// 5、每次当用户点击/输入的时候，把前一个定时器清除
			clearTimeout(timeout);
			// 6、然后创建一个新的 setTimeout，
			// 这样就能保证点击按钮后的 interval 间隔内
			// 如果用户还点击了的话，就不会执行 fn 函数
			timeout = setTimeout(() => {
				fn.call(this, arguments);
			}, 1000);
		};
	}

	// 3、需要进行防抖的事件处理
	function sayDebounce() {
		// ... 有些需要防抖的工作，在这里执行
		console.log("防抖成功！");
	}

</script>
</body>
</html>
